<div class="card my-1">
  <div class="card-body bg-faded">
    <div class="row">
      <div class="col-md-9 col-xs-12 mb-1">
        <form (ngSubmit)="search()">
          <div class="input-group" >
            <input type="text" name="q" class="form-control" [(ngModel)]="q" />
            <span class="input-group-btn">
              <button type="submit" class="btn btn-secondary">{{'go'}}</button>
            </span>
          </div>
          <!--<button type="button" class="btn btn-outline-info" (click)="clearTerm()">{{'clear'}}</button>-->
        </form>
      </div>
      <div class="col-md-3 col-xs-12 mb-1">
        <span class="ml-auto">
          <a class="btn btn-success btn-block" [routerLink]="['/posts', 'new']">new-post</a>
        </span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs-12 col-md-6 my-1" *ngFor="let post of posts ">
    <div class="card card-body">
      <h4 class="card-title">{{post.title}}</h4>
      <h6 class="card-subtitle text-muted">{{post.createdAt|date:'short'}}</h6>
      <p class="card-text">{{post.content}}</p>
      <div class="card-link">
        <a [routerLink]="['/posts', 'edit', post.id]">edit</a>
        <a [routerLink]="['/posts', 'view', post.id]">view</a>
      </div>
    </div>
  </div>
</div>

